.design-menu__header {
	background: $sidebar-bg-color;
	border-bottom: 1px solid darken( $sidebar-bg-color, 5% );
	display: block;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;

	.button {
		text-align: left;
		padding: 16px;
		width: 100%;
	}

	@include breakpoint( "<660px" ) {
		background-color: $gray-light;
	}

	&:hover {
		background-color: lighten( $sidebar-bg-color, 3% );

		.button.is-borderless:hover,
		.button.is-borderless:focus {
			color: $sidebar-text-color;
		}
	}
}

.design-menu {
	transform: translateX( 0 );
	transition: all 0.15s cubic-bezier(0.075, 0.820, 0.165, 1.000);
	background: lighten( $gray, 30% );
	position: fixed;
		top: 0;
		bottom: 0;
		left: -100vw;
	width: 100%;
	overflow: hidden;
	overflow-y: auto;
	opacity: 1;
	z-index: z-index( 'root', '.design-menu.is-visible' );
	border-right: 1px solid lighten( $gray, 25% );

	@include breakpoint( ">660px" ) {
		width: 272px;
	}
	&.is-visible {
		&.is-layout-preview-sidebar {
			transform: translateX( 100vw );
		}
		@include breakpoint( ">660px" ) {
			transform: translateX( 100vw );
		}
	}
}

.design-menu .site {
	background-color: #fff;
}

.design-menu__preview.button,
.design-menu__save.button {
	text-align: center;
	font-size: 14px;
	margin-bottom: 10px;
}

.design-menu__preview.button {
	@include breakpoint( ">660px" ) {
		display: none;
	}
}

.design-tool-list ul {
	list-style: none;
	margin: 0;
}

.design-tool-list__button {
	position: relative;
}

.sidebar__menu .gridicon.design-tool-list__button__icon {
	cursor: pointer;
	right: 12px;
	left: inherit;
}
